import React,{useContext,useState} from 'react'
import Header from "../../components/Header/Header.jsx"
import {Form,Input,Button,Toast} from "antd-mobile"
import "./login.less"
import { reqlogin } from '../../http/api';
import { MyContext } from '../../App';
import { actions } from '../../store';
const Login = (props) => {
    //做那个都会触发


    //1.初始化表单
    const [user, setUser] = useState({ phone: "", password: "" })
    const { state, dispatch } = useContext(MyContext)

    //3.登录的逻辑
    const login = () => {
      console.log("11111");
        reqlogin(user).then((res) => {
            if (res.data.code == 200) {
                //弹成功
                Toast.show({
                    content: res.data.msg
                })
                //存数据
                dispatch(actions.changeUserInfo(res.data.list))
                //跳转页面
                props.history.push  ("/index/home")
            }
        })
    }
    return (
        <div className='login'>
        <Header text="登录" register></Header>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' onChange={(e) => setUser({...user,phone:e})} clearable />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' onChange={(e) => setUser({...user,password:e})} clearable type='password' />
          </Form.Item>
          <Button block color="primary" size="large" onClick={login}>
            登录
          </Button>
        </Form>

        <div>userInfo:{JSON.stringify(state.userInfo)}</div>
      </div>
    )
}

export default Login